<template>
  <el-main>
    <div class="loginForm">
      <el-form :rules="rules" :label-position="labelPosition" ref="user" label-width="80px" :model="user">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="user.pwd" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="login('user')">登录</el-button>
          <el-button round @click="to_register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--三级联动-->
    <el-cascader
        v-model="cityIds"
        :options="cities"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"></el-cascader>
  </el-main>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return{
      cityIds:[5,65,628],
      sheng:{},
      shi:{},
      xian:{},
      cities:[],
      path:'',
      labelPosition: 'right',
      user:{},
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    handleChange(value) {
      this.sheng = value[0]
      this.shi = value[1]
      this.xian = value[2]
      console.log(this.sheng,this.shi,this.xian)
    },
    login(user) {
      this.$refs[user].validate((valid) => {
        if (valid) {
          this.axios.post(this.$userHost+"/user/login",this.user).then(res=>{
            if(res.data.result){

              console.log("token--->",res.data.data);
              this.$message.success("登录成功");

              // token写入 application
              window.localStorage.setItem("token",res.data.data)
              this.$router.push("/list");
            }else{
              this.$message.error(res.data.msg)
            }
          })
        }else{
          console.log('error submit!!');
          return false;
        }
      })
    },
    to_register() {
      this.$router.push('/register');
    },
    getCities() {
      this.axios.get(this.$userHost + 'city/getCityTree').then(res=>{
        this.cities = res.data.data
      })
    },
  },
  created() {
    this.getCities();
  }
}
</script>

<style scoped>
.loginForm{
  margin-left: 30%;
  margin-right: 30%;
}
</style>